<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <link type="text/css" href="Style.css" rel="stylesheet"></link>
  	<title>管理员</title>
	<style>
	  div#divOfBookInfo{position:absolute;left:150px;top:150px;}
	</style>
	<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
    <script type="text/javascript" src="js/inputnull.js"></script>
	<script type="text/javascript" src="layer-v3.1.1/layer/layer.js" ></script>
	<script>
	function clearBooksTable() {
		var table = document.getElementById("myOrd");
		while (table.rows.length > 1)
		table.deleteRow(1);
	}

	function show(){
		$.get("../findBooksServlet",function(books){
			 	clearBooksTable();
				var book=JSON.parse(books);
				var table=document.getElementById("myOrd");
				for(var index in book){
					var newRow = table.insertRow(table.rows.length);
					var col1 = newRow.insertCell(0);
					var col2 = newRow.insertCell(1);
					var col3 = newRow.insertCell(2);
					var col4 = newRow.insertCell(3);
					col1.innerHTML = book[index].name; 
					col2.innerHTML = book[index].author;
					col3.innerHTML = book[index].publisher;
					col4.innerHTML = book[index].price;
				}
		})
	}
	
	</script>
  </head>
  <body onload="show()">
	<ul id="nav">        <!--导航条-->
	  <li><a href="admin_order.html">订单详情 </a></li>
	  <li><a href="admin_bookInfo.html">图书信息 </a></li>
	  <li><a href="login.html">退出登录 </a></li>
	</ul>
	<form id="searchBook" onSubmit=" return orderquerybeforeSubmit(this) ">
	    <text id="s_b_txt1">平台管理员</text>
	    <text id="s_b_txt2">订单查询</text>
	    <input id="s_b_input1" name="orderInfo" type="text" placeholder="图书名称、作者">
		<input id="s_b_input2" name="search" type="submit" value="搜索">                   <!-- 搜索功能 -->
	</form>
	<div id="divOfBookInfo">
	  <h1>图书信息</h1>
        <table class="myOrd" id="myOrd">                     <!-- 显示回收单 -->       
          <tbody>
		    <tr>
			  <th>书名</th><th>作者</th><th>出版社</th><th>单位定价</th><th>操作</th>
			</tr>
		  </tbody>
        </table>
		<text>外部导入数据</text>  <Button id="loadingBtn">新建图书信息</text>                       <!-- 两个文本都要加功能（外部导入数据我不知道是啥） -->
	</div>
	<div id='loading' style = "display : none">
          <form id="orderForm" method="post" action="../createNewBookServlet" onSubmit=" return bookInfo(this) ">
		    <style>
			  input#ordId{position:relative;left:0;width:250px;height:30px;border-radius:0.6em;border:1px solid #777;outline:none;}
			</style>
	        图书名<input type="text" id="name" name="name" placeholder="订单号"><br/><br/>
			作者<input type="text" id="author" name="author" placeholder="订单号"><br/><br/>
			出版社<input type="text" id="publisher" name="publisher" placeholder="订单号"><br/><br/>
			价格<input type="text" id="price" name="price" placeholder="订单号"><br/><br/>
	     	<input type="submit" value="提交">
		    <input type="button" value="取消">
	      </form>
        </div>
	
	<script>
		$('#loadingBtn').on('click',function(){
          layer.open({
           type: 1,
           title: '账户信息详情',
           shadeClose: true,
           shade: false,
           maxmin: true, //开启最大化最小化按钮
           area: ['400px', '400px'],
           content: $("#loading").html()
});	
		});
        </script>
  </body>
</html>